<template>
  <div class="date-range-picker">
    <div class="quick-buttons">
      <el-button
        v-for="btn in quickButtons"
        :key="btn.type"
        :type="activeType === btn.type ? 'primary' : ''"
        @click.stop="handleQuickSelect(btn.type)"
      >
        {{ btn.label }}
      </el-button>

      <el-button :type="activeType === 'custom' ? 'primary' : ''" @click.stop="selfFunc">
        自定义
      </el-button>
      <el-date-picker
        v-if="showPicker"
        v-model="dateRange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :format="format"
        :value-format="valueFormat"
        :shortcuts="shortcuts"
        @change="handleDateChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  format: {
    type: String,
    default: "YYYY-MM-DD",
  },
  valueFormat: {
    type: String,
    default: "YYYY-MM-DD",
  },
});

const emit = defineEmits(["change"]);

const activeType = ref();
const showPicker = ref(false);
const dateRange = ref([]);

const quickButtons = [
  { type: "today", label: "今天" },
  { type: "threeDays", label: "近三天" },
  { type: "week", label: "近一周" },
];

const shortcuts = [
  {
    text: "今天",
    value: () => {
      const start = new Date();
      start.setHours(0, 0, 0, 0);
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: "近三天",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 2);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 6);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
];

const customLabel = computed(() => {
  return dateRange.value?.length === 2 && activeType.value === "custom"
    ? `${dateRange.value[0]} 至 ${dateRange.value[1]}`
    : "自定义";
});
const selfFunc = () => {
  initDateRange();
  activeType.value = "custom";
  showPicker.value = true;
};
const handleQuickSelect = (type) => {
  initDateRange();
  activeType.value = type;
  showPicker.value = false;

  const now = new Date();
  let start = new Date();
  let end = new Date();

  switch (type) {
    case "today":
      start.setHours(0, 0, 0, 0);
      end.setHours(23, 59, 59, 999);
      break;
    case "threeDays":
      start.setDate(now.getDate() - 2);
      start.setHours(0, 0, 0, 0);
      end.setHours(23, 59, 59, 999);
      break;
    case "week":
      start.setDate(now.getDate() - 6);
      start.setHours(0, 0, 0, 0);
      end.setHours(23, 59, 59, 999);
      break;
  }

  // 格式化日期为 yyyy-MM-dd
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };

  dateRange.value = [formatDate(start), formatDate(end)];
  emitChange();
};

const handleDateChange = (dates) => {
  if (dates && dates.length === 2) {
    activeType.value = "custom";
    emitChange();
  }
  showPicker.value = false;
};

const emitChange = () => {
  emit("change", {
    start: dateRange.value[0],
    end: dateRange.value[1],
    type: activeType.value,
  });
};

const initDateRange = () => {
  dateRange.value = [];
  activeType.value = "";
};
defineExpose({
  initDateRange,
});
</script>

<style scoped>
.date-range-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
